<template>
  <view class="container">
    <!-- 视频播放器 -->
    <view class="video-player-container">
      <video
        id="main-video"
        class="main-video"
        :src="mainVideo.videoUrl"
        :poster="mainVideo.image"
        show-play-btn="true"
        controls
        :loop="false"
        :muted="false"
        :autoplay="false"
        object-fit="cover"
        @ended="onVideoEnded"
        @play="onVideoPlay"
        @pause="onVideoPause"
        webkit-playsinline
        playsinline
      ></video>

      <!-- 视频标题 -->
      <view class="video-title" v-if="!isMainVideoPlaying">
        {{ mainVideo.title }}
      </view>
    </view>

    <!-- 服务分类 -->
    <view class="service-category">
      <view
        class="service-item"
        v-for="(item, index) in serviceList"
        :key="index"
        @touchstart="onServiceTouchStart(index)"
        @touchend="onServiceTouchEnd(index)"
        @touchcancel="onServiceTouchEnd(index)"
        :class="{ 'service-item-active': activeTouchIndex === index }"
      >
        <view class="service-icon" :style="{ backgroundColor: item.bgColor }">
          <text class="iconfont" :class="item.icon"></text>
        </view>
        <text class="service-name">{{ item.name }}</text>
      </view>
    </view>

    <!-- 热门机型 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">热门机型</text>
        <view class="more">查看全部 ></view>
      </view>
      <scroll-view
        class="aircraft-list scroll-view-container"
        scroll-x
        :scroll-left="scrollLeft"
        enhanced
        :show-scrollbar="false"
        :bounces="true"
        @scroll="onAircraftScroll"
        @touchstart="onScrollTouchStart"
        @touchend="onScrollTouchEnd"
      >
        <view
          class="aircraft-item"
          v-for="(item, index) in aircraftList"
          :key="index"
          @touchstart="onAircraftTouchStart(index, $event)"
          @touchmove="onAircraftTouchMove"
          @touchend="onAircraftTouchEnd(index, $event)"
          @touchcancel="onAircraftTouchCancel(index)"
          :data-active="activeAircraftIndex === index"
        >
          <image class="aircraft-img" :src="item.image" mode="aspectFill"></image>
          <view class="aircraft-info">
            <view class="aircraft-title-row">
              <text class="aircraft-name">{{ item.name }}</text>
              <view class="aircraft-tag" v-if="item.tag">{{ item.tag }}</view>
            </view>
            <view class="aircraft-detail">
              <text>{{ item.detail }}</text>
            </view>
          </view>
          <!-- <view class="view-btn">
            <svg-icon name="view-icon" size="20"></svg-icon>
          </view> -->
        </view>
      </scroll-view>
    </view>

    <!-- 低空资讯 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">低空资讯</text>
        <view class="more">查看全部 ></view>
      </view>
      <view class="news-list">
        <view
          class="news-item"
          v-for="(item, index) in newsList"
          :key="index"
          @touchstart="onNewsTouchStart($event, index)"
          @touchmove="onNewsTouchMove"
          @touchend="onNewsTouchEnd($event, index)"
          @touchcancel="onNewsTouchCancel(index)"
          :class="{ 'news-item-active': activeNewsIndex === index }"
        >
          <image class="news-img" :src="item.image" mode="aspectFill"></image>
          <view class="news-info">
            <text class="news-title">{{ item.title }}</text>
            <view class="news-meta">
              <text>{{ item.date }}</text>
              <text class="news-source">{{ item.source }}</text>
              <text class="news-views">阅读 {{ item.views }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import api from '@/api';

export default {
  // 启用下拉刷新
  enablePullDownRefresh: true,
  data() {
    return {
      isMainVideoPlaying: false,
      activeTouchIndex: -1, // 记录当前按下的服务项索引
      activeAircraftIndex: -1, // 记录当前按下的机型索引
      activeNewsIndex: -1, // 记录当前按下的资讯索引
      // 记录触摸相关的变量
      touchStartX: 0,
      touchStartY: 0,
      isTouchMoved: false,
      // --- Start of new data for auto-scroll ---
      scrollLeft: 0,
      scrollTimer: null,
      autoScrollTimeout: null,
      scrollDirection: 'right',
      maxScrollLeft: 0,
      userInteracting: false, // Flag for user touch interaction
      // --- End of new data for auto-scroll ---
      mainVideo: {
        image: 'https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=700&h=360&fit=crop&crop=center',
        videoUrl: 'https://feiwow.com:62/?explorer/share/file&hash=698bV_aB_-RDNdA3_dNBiHWuUP-7nzsD1Giu9f9tKR0iTN4RvIMSaB3OMMSeIr5FZRyD',
        title: '低空经济宣传视频'
      },
      serviceList: [
        {
          name: '每日签到',
          icon: 'icon-feiji',
          bgColor: '#4A7FFF'
        },
        {
          name: '云迎营地',
          icon: 'icon-zhoubian',
          bgColor: '#FFA64A'
        },
        {
          name: '低空文旅',
          icon: 'icon-yingdi',
          bgColor: '#5AC963'
        },
        {
          name: '更多服务',
          icon: 'icon-gengduo',
          bgColor: '#9F76FF'
        }
      ],
      aircraftList: [
        {
          name: '锐翔RX1E',
          image: 'https://feiwow.com:62/?explorer/share/file&hash=01c0XfkaoDxUUrxtKeZT__0S2GrIxO_0Rmy6k7AkxLQyc6Y5OwugNwxv-oFTGqDxszt-',
          tag: '固定翼',
          detail: '载荷2人 | 速度120km/h | 总重630kg | 续航280km'
        },
        {
          name: 'ZG-ONE',
          image: 'https://feiwow.com:62/?explorer/share/file&hash=c4a7IJx-EsLiWlqpDroGKgVF544uYEsFAhE9Yufbf4rzdnMpN42V1etSW3jylG7T_6xR',
          tag: '旅游观光',
          detail: '载荷2人 | 速度75km/h | 总重780kg | 换电5分钟'
        },
        {
          name: 'ZG-ONE鹊飞',
          image: 'https://www.lzlair.com/uploads/image/20241128/f38325260c526ab94915036e5bca3c30.png',
          tag: '旅游观光',
          detail: '载荷2人 | 速度100km/h | 总重1000kg | 换电5分钟'
        },
        {
          name: 'ZG-T6',
          image: 'https://feiwow.com:62/?explorer/share/file&hash=a241RpCjqABgVUvuxUWyvNE4Ool_KLM_A1JMSkLQqJmyJWOgurMSoC_nZbJ70n9G_LkS',
          tag: '城际飞行',
          detail: '载荷6人 | 速度250km/h | 总重2500kg | 续航300km'
        }
      ],
      newsList: [] // 低空资讯将从API获取
    };
  },
  onLoad() {
    // 初始化视频播放器
    this.fetchArticles();
  },
  onShow() {
    // 页面显示时，如果用户没有在交互，则恢复自动滚动
    if (!this.userInteracting) {
      this.autoScrollTimeout = setTimeout(() => {
        this.startAutoScroll();
      }, 1500); // 延迟1.5秒后恢复
    }
  },
  onReady() {
    // Wait 3 seconds then start auto-scrolling
    this.autoScrollTimeout = setTimeout(() => {
      this.startAutoScroll();
    }, 3000);
  },
  // 页面隐藏时暂停视频
  onHide() {
    if (this.isMainVideoPlaying) {
      const videoContext = uni.createVideoContext('main-video', this);
      if (videoContext) {
        videoContext.pause();
        this.isMainVideoPlaying = false;
      }
    }
    // Clear timers when page is hidden
    clearTimeout(this.autoScrollTimeout);
    clearInterval(this.scrollTimer);
  },
  // 页面卸载时暂停视频
  onUnload() {
    if (this.isMainVideoPlaying) {
      const videoContext = uni.createVideoContext('main-video', this);
      if (videoContext) {
        videoContext.pause();
        this.isMainVideoPlaying = false;
      }
    }
    // Clear timers when page is unloaded
    clearTimeout(this.autoScrollTimeout);
    clearInterval(this.scrollTimer);
  },

  // 下拉刷新
  onPullDownRefresh() {
    this.fetchArticles().finally(() => {
      uni.stopPullDownRefresh();
    });
  },
  methods: {
    // 视频播放开始事件
    onVideoPlay() {
      this.isMainVideoPlaying = true;
      console.log('视频开始播放');
    },

    // 视频暂停事件
    onVideoPause() {
      this.isMainVideoPlaying = false;
      console.log('视频已暂停');
    },

    // 视频播放结束事件
    onVideoEnded() {
      this.isMainVideoPlaying = false;
      console.log('视频播放结束');
    },

    // 服务项触摸开始
    onServiceTouchStart(index) {
      this.activeTouchIndex = index;
    },

    // 服务项触摸结束
    onServiceTouchEnd(index) {
      setTimeout(() => {
        this.activeTouchIndex = -1;
      }, 100); // 短暂延时，让动画效果完成

      // 服务项点击跳转逻辑
      const service = this.serviceList[index];
      console.log('点击了服务项：', service.name);

      if (service.name === '每日签到') {
        console.log('跳转到每日签到页面');
        uni.navigateTo({
          url: '/subPackages/daily-check-in/index',
          fail: (err) => {
            console.error('跳转到每日签到页面失败：', err);
            uni.showToast({
              title: '跳转失败',
              icon: 'none'
            });
          }
        });
      } else if (service.name === '低空文旅') {
        console.log('跳转到低空文旅页面');
        uni.navigateTo({
          url: '/subPackages/low-altitude-tourism/index',
          fail: (err) => {
            console.error('跳转到低空文旅页面失败：', err);
            uni.showToast({
              title: '跳转失败',
              icon: 'none'
            });
          }
        });
      } else if (service.name === '云迎营地') {
        console.log('跳转到云迎营地页面');
        uni.navigateTo({
          url: '/subPackages/distribution/index',
          fail: (err) => {
            console.error('跳转到云迎营地页面失败：', err);
            uni.showToast({
              title: '跳转失败',
              icon: 'none'
            });
          }
        });
      } else {
        uni.showToast({
          title: `${service.name}功能开发中`,
          icon: 'none'
        });
      }
    },

    // 监听机型滚动
    onAircraftScroll(e) {
      // If user is not interacting, the scroll is programmatic.
      // If user is interacting, we update our scrollLeft to sync.
      if (this.userInteracting) {
        this.scrollLeft = e.detail.scrollLeft;
      }
    },

    // --- Start of new methods for auto-scroll ---
    startAutoScroll() {
      // Do not start if user is interacting
      if (this.userInteracting) return;

      const query = uni.createSelectorQuery().in(this);
      query.select('.aircraft-list').boundingClientRect();
      query.selectAll('.aircraft-item').fields({ rect: true, size: true });

      query.exec((data) => {
        if (!data || !data[0] || !data[1] || data[1].length === 0) {
          console.error('Could not calculate scroll dimensions.');
          return;
        }

        const containerWidth = data[0].width;
        const marginRightPx = uni.upx2px(20);
        let totalContentWidth = 0;

        data[1].forEach((item, index) => {
          totalContentWidth += item.width;
          if (index < data[1].length - 1) {
            totalContentWidth += marginRightPx;
          }
        });

        this.maxScrollLeft = totalContentWidth - containerWidth;

        if (this.maxScrollLeft > 0) {
          clearInterval(this.scrollTimer); // Ensure no multiple timers running
          this.scrollTimer = setInterval(() => {
            if (this.userInteracting) {
              clearInterval(this.scrollTimer);
              return;
            }

            if (this.scrollDirection === 'right') {
              this.scrollLeft += 2; // Control scroll speed
              if (this.scrollLeft >= this.maxScrollLeft) {
                this.scrollLeft = this.maxScrollLeft;
                this.scrollDirection = 'left';
              }
            } else {
              this.scrollLeft -= 2; // Control scroll speed
              if (this.scrollLeft <= 0) {
                this.scrollLeft = 0;
                this.scrollDirection = 'right';
              }
            }
          }, 30); // Control scroll smoothness
        }
      });
    },

    // User starts touching the scroll view
    onScrollTouchStart() {
      this.userInteracting = true;
      clearTimeout(this.autoScrollTimeout);
      clearInterval(this.scrollTimer);
    },

    // User stops touching the scroll view
    onScrollTouchEnd() {
      this.userInteracting = false;
      // Restart auto-scroll after a 5-second delay of inactivity
      this.autoScrollTimeout = setTimeout(() => {
        this.startAutoScroll();
      }, 5000);
    },
    // --- End of new methods for auto-scroll ---

    // 机型触摸开始
    onAircraftTouchStart(index, event) {
      this.activeAircraftIndex = index;

      // 记录触摸起始位置
      this.touchStartX = event.touches[0].clientX;
      this.touchStartY = event.touches[0].clientY;
      this.isTouchMoved = false;
    },

    // 机型触摸移动
    onAircraftTouchMove(event) {
      // 判断是否为滚动操作
      const touchMoveX = event.touches[0].clientX;
      const touchMoveY = event.touches[0].clientY;
      const distanceX = Math.abs(touchMoveX - this.touchStartX);
      const distanceY = Math.abs(touchMoveY - this.touchStartY);

      // 如果移动距离超过阈值，标记为滚动
      const threshold = 5;
      if (distanceX > threshold || distanceY > threshold) {
        this.isTouchMoved = true;
      }
    },

    // 机型触摸结束
    onAircraftTouchEnd(index, event) {
      setTimeout(() => {
        this.activeAircraftIndex = -1;
      }, 100);

      // 只有在没有滚动的情况下才跳转到机型详情页面
      if (!this.isTouchMoved) {
        // 跳转到机型详情页面
        const aircraft = this.aircraftList[index];
        const aircraftData = {
          id: index,
          name: aircraft.name,
          images: [
            aircraft.image,
            'https://feiwow.com:62/?explorer/share/file&hash=01c0XfkaoDxUUrxtKeZT__0S2GrIxO_0Rmy6k7AkxLQyc6Y5OwugNwxv-oFTGqDxszt-',
            'https://feiwow.com:62/?explorer/share/file&hash=c4a7IJx-EsLiWlqpDroGKgVF544uYEsFAhE9Yufbf4rzdnMpN42V1etSW3jylG7T_6xR'
          ],
          techParams: [
            {
              icon: 'icon-renshu',
              label: '载客人数',
              value: aircraft.detail.match(/载荷(\d+人)/)?.[1] || '2人'
            },
            {
              icon: 'icon-suduzhi',
              label: '最高时速',
              value: aircraft.detail.match(/速度(\d+km\/h)/)?.[1] || '120km/h'
            },
            {
              icon: 'icon-zhongliang',
              label: '起飞重量',
              value: aircraft.detail.match(/总重(\d+kg)/)?.[1] || '630kg'
            },
            {
              icon: 'icon-xuhang',
              label: '续航里程',
              value: aircraft.detail.match(/续航(\d+km)/)?.[1] || aircraft.detail.match(/换电(\d+分钟)/)?.[1] || '280km'
            }
          ],
          performance: [
            {
              name: '飞行高度',
              value: '3000m',
              percentage: 85
            },
            {
              name: '巡航速度',
              value: aircraft.detail.match(/速度(\d+)/)?.[1] || '120',
              percentage: 70
            },
            {
              name: '燃油效率',
              value: '95%',
              percentage: 95
            },
            {
              name: '安全系数',
              value: '99.8%',
              percentage: 98
            }
          ],
          showcaseImages: [
            {
              url: 'https://www.lzlair.com/uploads/image/20241128/f38325260c526ab94915036e5bca3c30.png',
              title: '超强续航能力',
              description: '单次充电可飞行长达8小时'
            },
            {
              url: 'https://www.lzlair.com/uploads/image/20241128/5e22dd6536b2ab03f62d82e878f5d19c.png',
              title: '精准定位系统',
              description: '高精度GPS和北斗双定位'
            },
            {
              url: 'https://www.lzlair.com/uploads/image/20241128/ea27441c769cfb72469daf87178f55bd.png',
              title: '智能操控系统',
              description: '一键起飞，安全可靠'
            },
            {
              url: 'https://spark-builder.s3.cn-north-1.amazonaws.com.cn/image/213f114d-c34b-4da1-88d0-e1941491a234.png',
              title: '多功能载荷',
              description: '可配置多种专业设备'
            }
          ],
          scenarios: [
            {
              title: '城市观光',
              description: '低空旅游观光飞行',
              image: 'https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=400&h=300&fit=crop'
            },
            {
              title: '商务出行',
              description: '高效商务通勤',
              image: 'https://images.unsplash.com/photo-1540979388789-6cee28a1cdc9?w=400&h=300&fit=crop'
            },
            {
              title: '应急救援',
              description: '紧急医疗救援',
              image: 'https://images.unsplash.com/photo-1581833971358-2c8b550f87b3?w=400&h=300&fit=crop'
            },
            {
              title: '货物运输',
              description: '快速物流配送',
              image: 'https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=400&h=300&fit=crop'
            }
          ]
        };

        uni.navigateTo({
          url: `/subPackages/aircraft-detail/index?aircraftData=${encodeURIComponent(JSON.stringify(aircraftData))}`
        });
      }
    },

    // 机型触摸取消
    onAircraftTouchCancel(index) {
      setTimeout(() => {
        this.activeAircraftIndex = -1;
      }, 100);
    },

    // 资讯触摸开始
    onNewsTouchStart(event, index) {
      this.activeNewsIndex = index;

      // 记录触摸起始位置
      this.touchStartX = event.touches[0].clientX;
      this.touchStartY = event.touches[0].clientY;
      this.isTouchMoved = false;
    },

    // 资讯触摸移动
    onNewsTouchMove(event) {
      // 判断是否为滑动操作
      const touchMoveX = event.touches[0].clientX;
      const touchMoveY = event.touches[0].clientY;
      const distanceX = Math.abs(touchMoveX - this.touchStartX);
      const distanceY = Math.abs(touchMoveY - this.touchStartY);

      // 如果移动距离超过阈值，标记为滑动
      const threshold = 5; // 更小的阈值来更快识别滑动
      if (distanceX > threshold || distanceY > threshold) {
        this.isTouchMoved = true;
      }
    },

    // 资讯触摸结束
    onNewsTouchEnd(event, index) {
      setTimeout(() => {
        this.activeNewsIndex = -1;
      }, 100);

      // 如果没有被标记为滑动操作，则认为是点击
      if (!this.isTouchMoved) {
        // 获取资讯文章的微信URL
        const article = this.newsList[index];
        if (article && article.wechatUrl) {
          // 跳转到WebView页面并传递URL
          uni.navigateTo({
            url: `/subPackages/web-view/index?url=${encodeURIComponent(article.wechatUrl)}&title=${encodeURIComponent(article.title)}`
          });
        } else {
          uni.showToast({
            title: '文章链接不可用',
            icon: 'none'
          });
        }
      }
    },

    // 资讯触摸取消
    onNewsTouchCancel(index) {
      setTimeout(() => {
        this.activeNewsIndex = -1;
      }, 100);
    },

    // 获取文章数据
    fetchArticles() {
      uni.showLoading({
        title: '加载中...'
      });
      return api.article
        .getArticles({
          pageNum: 1,
          pageSize: 10
        })
        .then((res) => {
          // 处理API返回的数据
          if (res.data && res.data.list && res.data.list.length > 0) {
            this.newsList = res.data.list.map((item) => {
              // 只保留日期的年月日部分
              const datePart = item.publishDate ? item.publishDate.split(' ')[0] : '';
              return {
                id: item.id,
                title: item.title,
                image: item.coverUrl,
                date: datePart,
                source: item.author,
                views: item.readCount || '0',
                wechatUrl: item.wechatUrl // 添加微信文章URL
              };
            });
          }
          return res;
        })
        .catch((err) => {
          console.error('获取文章列表失败', err);
          return Promise.reject(err);
        })
        .finally(() => {
          uni.hideLoading();
        });
    }
  }
};
</script>

<style lang="scss">
/* 隐藏所有滚动条 */
::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  background: transparent;
  -webkit-appearance: none;
}

/* 让页面和容器支持隐藏滚动条但可滚动 */
page,
.container,
.scroll-view-container {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.container {
  width: 100%;
  background-color: #f5f5f5;
  min-height: 100vh;
  overflow-x: hidden; /* 防止水平滚动 */
}

/* 视频播放器样式 */
.video-player-container {
  width: 100%;
  height: 420rpx;
  position: relative;
  overflow: hidden;
  background-color: #000;
}

.main-video {
  width: 100%;
  height: 100%;
}

.video-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20rpx;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 28rpx;
  text-align: center;
}

/* SVG 图标已通过组件控制大小 */

/* 服务分类样式 */
.service-category {
  display: flex;
  justify-content: space-around;
  padding: 30rpx 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transition: transform 0.15s ease;
  z-index: 1;
}

/* 点击时的动画效果 */
.service-item-active {
  transform: scale(0.92);
}

.service-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
  position: relative;
  overflow: hidden;
}

.service-icon:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}

.service-item-active .service-icon:after {
  animation: ripple 0.4s ease-out;
}

@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

.service-icon .iconfont {
  font-size: 56rpx;
  color: #ffffff;
}

.service-name {
  font-size: 26rpx;
  color: #333;
  transition: color 0.2s ease;
}

.service-item-active .service-name {
  color: #1455ff;
}

/* 章节标题样式 */
.section {
  margin-bottom: 20rpx;
  background-color: #fff;
  padding: 20rpx 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  position: relative;
  padding-left: 20rpx;
}

.section-title:before {
  content: '';
  position: absolute;
  left: 0;
  top: 8rpx;
  width: 8rpx;
  height: 32rpx;
  background-color: #1455ff;
}

.more {
  font-size: 24rpx;
  color: #999;
}

/* 热门机型样式 */
.aircraft-list {
  white-space: nowrap;
  padding: 0 30rpx;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* 在iOS上启用原生滚动减速 */
  scroll-snap-type: x mandatory; /* 使滚动对齐到元素 */
}

.aircraft-item {
  display: inline-block;
  width: 600rpx;
  margin-right: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  position: relative;
  scroll-snap-align: center; /* 滚动对齐到中心 */
  transition: all 0.2s ease; /* 为交互添加平滑过渡 */
  will-change: transform; /* 优化性能 */
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

/* 机型卡片触摸效果 */
.aircraft-item:active,
.aircraft-item[data-active='true'] {
  transform: scale(0.97);
  box-shadow: 0 1rpx 5rpx rgba(0, 0, 0, 0.08);
}

.aircraft-img {
  width: 100%;
  height: 300rpx;
}

.aircraft-info {
  padding: 20rpx;
}

.aircraft-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.aircraft-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
}

.aircraft-tag {
  display: inline-block;
  font-size: 22rpx;
  color: #fff;
  background-color: #1455ff;
  padding: 4rpx 12rpx;
  border-radius: 10rpx;
  margin-left: 15rpx;
}

.aircraft-detail {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}

.view-btn {
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: #eee;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG 图标已通过组件控制大小 */

/* 低空资讯样式 */
.news-list {
  padding: 0 30rpx;
}

.news-item {
  display: flex;
  flex-direction: column;
  padding: 20rpx 0;
  border-bottom: 1px solid #f0f0f0;
  transition: transform 0.2s ease, background-color 0.3s ease;
  position: relative;
  z-index: 1;
  border-radius: 10rpx;
  overflow: hidden;
}

.news-item-active {
  transform: translateY(2rpx) scale(0.99);
  background-color: rgba(240, 240, 240, 0.5);
}

.news-item:last-child {
  border-bottom: none;
}

.news-img {
  width: 100%;
  height: 300rpx;
  border-radius: 8rpx;
  margin-bottom: 15rpx;
  position: relative;
  overflow: hidden;
}

.news-img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.news-item-active .news-img::after {
  opacity: 1;
  animation: news-image-pulse 0.4s ease-out;
}

@keyframes news-image-pulse {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
  }
}

.news-info {
  display: flex;
  flex-direction: column;
}

.news-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  margin-bottom: 15rpx;
  transition: color 0.2s ease;
}

.news-item-active .news-title {
  color: #1455ff;
}

.news-meta {
  font-size: 22rpx;
  color: #999;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.news-source,
.news-views {
  margin-left: 20rpx;
}
</style>
